<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  <script src = "https://i.kuaiex.com/Wechat/weixinshare.aspx?url=http://dian.kuaiex.com.cn/topic/wimg/index.html"></script>
  <script src="js/jquery-1.11.3.min.js"></script>
  <link rel="stylesheet" href="css/publick.css" />
  <link rel="stylesheet" href="css/index.css"/>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1469501621_813789.css" />
 <title>上传照片</title>
 </head>
 <body>
 	    <!--头部-->
 	  	 <header>
 	  	 	<img src="img/uploadtop.png" alt="" />
 	  	 </header>
 	  	  <div class = "title text-center">
 	  	  	  <img src="img/text.png" alt="" />
 	  	  </div>
 	  	 <div id = "imgBox">
 	  	 	<!--动态添加图片-->
 	  	 </div>
 	  	 <!--图片预览-->
 	  	 <div id = "imgWrap" class = "fix hide">
 	  	 	  <img src="" id = "bigImg" class = "abs"/>
 	  	 	  <i class = "abs iconfont" id ="delete">&#xe62f;</i>
 	  	 	  <div id = "overWrap" class = "abs"></div>
 	  	 </div>
 	  	 <!--图片选择按钮-->
 	  	 <div  id = "chooseImg" class = "chooseImg auto text-center">
 	  	 	 <img src="img/addimg.png" alt="" />
 	  	 	 选择照片
 	  	 </div>
 	  	 <!--图片上传按钮-->
 	  	<div  id = "uploadImg" class = "uploadImg fix auto text-center">上传照片</div>
       <!--上传成功显示的遮罩-->
      <div class = "bodyWrap fix hide">
       	   <img src="img/bodywrap.png" alt="" />
       </div>  
      <!--脚本--> 
<script type = "text/javascript">
document.body.style.height = window.innerHeight + "px";
var images = {
	localId: [], //选择要上传的图片id  
	serverId: [] //图片上传成功  返回的id
};
var index = 0;
var boxDom = dom("imgBox");
var wrapDom = dom("imgWrap");
var shareTitle = "晒出最美度假照";
var shareImgUrl = "http://dian.kuaiex.com.cn/topic/wimg/img/share.png";
var shareDesc = "国都港股，免佣助游";
//初始化分享功能
wx.ready(function(){
	  wx.onMenuShareAppMessage({
		title: shareTitle, // 分享标题
		desc: shareDesc, // 分享描述
		link: "https://www.baidu.com", // 分享链接
		imgUrl: shareImgUrl, // 分享图标
		type: '', // 分享类型,music、video或link，不填默认为link
		dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		success: function() {
			alert("分享成功")
		},
		cancel: function() {
			// 用户取消分享后执行的回调函数
		}
	});
	//分享到朋友圈
	wx.onMenuShareTimeline({
		title: shareTitle, // 分享标题
		link: "https://www.baidu,com", // 分享链接
		imgUrl: shareImgUrl, // 分享图标
		desc:shareDesc,
		success: function() {
			// 
			alert("分享成功");
		},
		cancel: function() {
			// 用户取消分享后执行的回调函数
		}
	});
})
//点击选择需要上传的图片
dom("chooseImg").addEventListener("touchstart", function() {
	//微信的图片选择接口
	wx.chooseImage({
		count: 9 - boxDom.children.length, //图片的张数
		success: function(res) { //成功执行的回调  
			//将选择的片在页面显示出来进行预览
			for(var i = 0; i < res.localIds.length; i++) {
				//将每一个对应的图片localId  添加到数组中
				images.localId.push(res.localIds[i]);
				//动态创建图片标签
				var imgDom = document.createElement("img");
				//将生成的localId当做图片的src属性  可以显示图片
				imgDom.src = res.localIds[i];
				//给每一张图片添加默认样式
				imgDom.className = "default";

				imgDom.index = i;
				//给每一张图片添加点击事件
				imgDom.onclick = function() {
					//点击显示图片预览层  即显示大图
					index = this.index;
					wrapDom.style["display"] = "block";
					dom("bigImg").src = this.src;
					dom("bigImg").style.top = (wrapDom.offsetHeight - dom("bigImg").offsetHeight) / 2 + "px";
				};
				//将动态创建的img添加到盒子中
				boxDom.appendChild(imgDom);
			};
		}
	});
});

dom("delete").addEventListener("touchstart", function() {
	//将对应的图片删除
	boxDom.removeChild(boxDom.children[index]);
	//对应的图片的locaId从数组中删除
	images.localId.splice(index, 1);
	//隐藏图片预览框
	this.parentElement.style.display = "none";
	//图片的长度改变  重新初始化index的值
	for(var i = 0; i < boxDom.children.length; i++) {
		boxDom.children[i].index = i;
	};
});
//点击图片预览的遮罩层  预览层隐藏
dom("overWrap").addEventListener("touchstart", function() {
	this.parentElement.style.display = "none";
});
//点击上传按钮  图片上传
dom("uploadImg").addEventListener("touchstart", function() {
	//没有选择图片提示选择
	if(images.localId.length == 0) {
		alert('请选择要上传的图片');
		return;
	}
	var i = 0,
		length = images.localId.length;
	images.serverId = [];
  //图片上传的方法
	function upload() {
		//进行图片上传
		wx.uploadImage({
			localId: images.localId[i],
			success: function(res) { //成功执行的回调 
				i++;
				images.serverId.push(res.serverId);
				if(i < length) {
					upload();
				}
                //两者长度相等  表示图片已经上传完毕
				if(images.serverId.length == length) {
					images.localId = [];//上传成功之后  清空存放图片id的数组
					boxDom.innerHTML = "";//图片上传成功清空缩略图
					$(".bodyWrap").show();//提示分享层显示
					$.ajax({
						type: "post",
						url: "http://api.sainiuhui.com/topic0727",
						data: {
							filelist: images.serverId,
							type: 1,
							key: images.serverId[0]
						},
						success: function() {
							//分享给好友
							wx.onMenuShareAppMessage({
								title: shareTitle, // 分享标题
								desc: shareDesc, // 分享描述
								link: "http://dian.kuaiex.com/topic/wimg/show.html?key=" + images.serverId[0], // 分享链接
								imgUrl: shareImgUrl, // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									alert("分享成功")
									$(".bodyWrap").hide();
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});
							//分享到朋友圈
							wx.onMenuShareTimeline({
								title: shareTitle, // 分享标题
								link: "http://dian.kuaiex.com/topic/wimg/show.html?key=" + images.serverId[0], // 分享链接
								imgUrl: shareImgUrl, // 分享图标
								desc:shareDesc,
								success: function() {
									// 
									alert("分享成功");
									$(".bodyWrap").hide();
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}
							});
						}
					});
				};
			},
			fail: function(res) {
				alert(JSON.stringify(res));
			}
		});

	}
	upload();
});

function dom(id) {
	return document.getElementById(id);
};
</script>
 </body>
</html>
